<template>
  <div class="animate__animated animate__fadeInUp">
    <div class="datr">
      <p class="ga"></p>
      <span
        class="chryu animate__animated animate__fadeInUp animate__delay-0.5s"
        >成员管理</span
      >
    </div>
    <el-card shadow="never">
      <div
        class="bigre animate__animated animate__fadeInUp animate__delay-0.9s"
      >
        <span>成员编辑</span>
        <p>
          <el-row>
            <el-button @click="fanhui" size="small">返回</el-button>
          </el-row>
        </p>
      </div>
      <!-- 中间编辑框 -->
      <div class="d-flex j-center mt-3">
        <div class="biaoge" style="width: 500px">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="广告名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="广告位置" prop="position" required>
              <el-input v-model="ruleForm.position"></el-input>
            </el-form-item>
            <el-form-item label="点击数" prop="num">
              <el-input v-model="ruleForm.num"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" required>
              <div class="block d-flex">
                <el-date-picker
                  v-model="value1"
                  type="datetime"
                  :placeholder="this.ruleForm.startTime"
                  align="right"
                  :picker-options="pickerOptions"
                >
                  >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="到期时间" required>
              <div class="block d-flex">
                <el-date-picker
                  v-model="value2"
                  type="datetime"
                  :placeholder="this.ruleForm.endTime"
                  align="right"
                  :picker-options="pickerOptions"
                >
                  >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item class="d-flex" label="上线/下线" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio label="上线"></el-radio>
                <el-radio label="下线"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="广告图片" required>
              <el-upload
                class="upload-demo t-left"
                ref="upload"
                action="/gym/uploadImage"
                :on-success="handleRemove"
                :on-remove="handleRemove"
                :file-list="fileList"
                :auto-upload="true"
                name="image"
              >
                <p>
                  <el-button
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="handlePreview"
                    >选取文件</el-button
                  >
                </p>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item class="d-flex" label="广告链接" prop="link">
              <el-select v-model="value" :placeholder="this.ruleForm.link">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="广告备注" prop="remarks">
              <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
              >上传到服务器</el-button
            > -->
              <el-button type="primary" @click="submitForm('ruleForm')"
                >保存</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
moment.locale("zh-cn");
export default {
  data() {
    return {
      kai: "", //回显开始时间戳
      jie: "", //回显结束时间戳
      value: "", //下拉框值
      user: 0, //sessionStorage存的id

      value1: "", //开始时间的值
      value2: "", //结束时间的值
      //表格的值
      ruleForm: {},
      // 下拉框的值
      options: [
        {
          value: "https://www.baidu.com/s?ie=UTF-8&wd=baidufanyi",
          // label: "黄金糕",
        },
        {
          value: "https://element.eleme.cn/#/zh-CN/component/select",
          // label: "双皮奶",
        },
        {
          value: "https://github.com/Remix-Design/remixicon#usage",
          // label: "蚵仔煎",
        },
        {
          value: "https://fanyi.baidu.com/home",
          // label: "龙须面",
        },
        {
          value: "https://fanyi.baidu.com/appdownload/download.html",
          // label: "北京烤鸭",
        },
      ],

      fileList: [], //图片上传

      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 0, max: 50, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请输入活动位置", trigger: "blur" },
        ],
        startTime: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        endTime: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            message: "请至少选择一个活动性质",
          },
        ],
        resource: [
          { required: false, message: "请选择活动资源", trigger: "change" },
        ],
        remarks: [{ required: true, message: "请填备注", trigger: "blur" }],
      },
      // 结束时间
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();

        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  // 函数
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();

      this.ruleForm.name = "广告名称";
      this.ruleForm.position = "广告位置";
      this.ruleForm.image = "";
      this.ruleForm.startTime = "开始时间";
      this.ruleForm.endTime = "结束时间";
      this.ruleForm.remarks = "";
      this.ruleForm.status = "上线";
      this.ruleForm.remarks = "备注信息";
      this.ruleForm.link = "广告链接";
      this.ruleForm.num = "点击次数";
    },
    // 图片上传
    //上传到服务器
    submitUpload() {
      this.$refs.upload.submit();
      console.log(this.$refs.upload, 111111);
    },
    handleRemove(response, file, fileList) {
      console.log(response.data, 22222);
      this.ruleForm.image = response.data;
    },
    handlePreview(file) {
      // console.log(file, 33333);
    },
    // 返回
    fanhui() {
      this.$router.push("advertising");
      sessionStorage.clear("user");
    },

    // 接收路由传来数据

    jieshoshuju() {
      // let mas = JSON.stringify(this.$route.params.user);
      let mas = this.$route.params.user;
      if (mas) sessionStorage.setItem("user", mas);
      this.user = this.$route.params.user || sessionStorage.getItem("user");
    },

    //广告编辑回显接口
    huixian() {
      this.$axios({
        url: "/gym/advertisement/find",
        method: "post",
        data: {
          id: this.user,
        },
      }).then((res) => {
        this.ruleForm = res.data.data;
        // console.log(this.ruleForm)
        this.ruleForm.status = this.ruleForm.status == 0 ? "下线" : "上线";
        this.kai = this.ruleForm.endTime;
        this.ruleForm.endTime = moment(this.ruleForm.endTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
         this.jie = this.ruleForm.startTime;
        this.ruleForm.startTime = moment(this.ruleForm.startTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
       
        this.value1 = this.ruleForm.startTime;
        this.value2 = this.ruleForm.endTime;
        this.value = this.ruleForm.link;
      });
    },
    // 保存按钮函数
    submitForm(formName) {

      this.$refs[formName].validate((valid) => {
        //  console.log($refs[formName].validate((valid)))
        if (valid) {
          // 正则全部成功后
          this.ruleForm.status = this.ruleForm.status == "下线" ? 0 : 1; //上下线的判断
          //开始时间转时间戳
            this.ruleForm.endTime = moment(this.value1).format("x");
          //结束时间转时间戳
            this.ruleForm.startTime = moment(this.value2).format("x");
          // console.log(
          //   this.ruleForm.status,
          //   this.ruleForm.endTime,
          //   this.ruleForm.startTime
          // );
          // console.log(this.ruleForm);

          this.$axios({
            url: "/gym/advertisement/update",
            method: "post",
            data: {
              id: this.ruleForm.id,
              name: this.ruleForm.name,
              position: this.ruleForm.position,
              startTime: this.ruleForm.startTime,
              endTime: this.ruleForm.endTime,
              status: this.ruleForm.status,
              link: this.value,
              remarks: this.ruleForm.remarks,
              image: this.ruleForm.image,
              num: this.ruleForm.num,
            },
          }).then((res) => {
            console.log(res);

            if (
              (res.data.code >= 200 && res.data.code < 300) ||
              res.data.code == 304
            ) {
              console.log(111);
              this.$message({
                type: "success",
                message: "编辑成功!",
              });
              this.$router.push("advertising");
            } else {
              this.$message.error("编辑失败");
              this.ruleForm.endTime=this.ruleForm.endTime;
              this.ruleForm.startTime=this.ruleForm.startTime;
              
            }
          });
        } else {
          this.$message.error("非空字段不能为空");
          return false;
        }
      });
    },
  },
  // 创建前
  brforeCreate() {},
  // 创建后
  created() {},
  // 挂载前
  beforeMount() {
    // console.log(111);
    this.jieshoshuju();
    this.huixian();
    // this.submitUpload(),
    // this.handleRemove(),
    // this.handlePreview()
  },
  // 挂载后
  mounted() {
    // this.diji()
    // console.log(this.total);
  },
  // 数据更新前
  beforeUpdate() {},
  // 数据更新后
  updated() {},
  // 销毁前
  beforeDestroy() {},
  // 销毁后
  destroyed() {},
};
</script>

<style scoped lang="less">
// 角色管理导航
.datr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.619),
    rgba(14, 13, 13, 0.251)
  );
  border-radius: 8px 8px 0px 0px;

  .ga {
    display: flex;
    align-items: center;
    width: 5px;
    height: 35px;
    background-color: rgba(0, 0, 255);
    // line-height: 50px;
    margin-left: 10px;
  }
  .chryu {
    display: inline-block;
    width: 80px;
    height: 50px;
    line-height: 50px;
    color: rgb(247, 245, 245);
    font-size: 17px;
    font-weight: bold;
  }
}
//表格导航栏css
.bigre {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  // justify-content:'center';
  line-height: 50px;
  background-color: rgba(175, 175, 175, 0.557);
  border-radius: 8px 8px 0px 0px;
  span {
    width: 80px;
    height: 50px;
    color: rgb(12, 3, 3);
  }
  p {
    width: 100px;
    height: 50px;
  }
}
// 中间编辑框
.biao {
  width: 500px;
}
// 上线下线的样式
.el-form {
  .el-form-item:nth-child(5) {
    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
.el-form {
  .el-form-item:nth-child(7) {
    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
</style>